.daterange {
  position: relative;

  * {
    box-sizing: border-box;
  }
  div, span, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
  }
  ul {
    list-style: none;
  }
  &.dr-active {
    z-index: 10;
  }
  .dr-input {
    display: flex;
    border: 1px solid $mouse;
    border-radius: $radius;
    background-color: $white;
    position: relative;
    z-index: 5;
    overflow: hidden;
    height: 40px;

    &:hover {
      border-color: $blue;
    }
    &.dr-active {
      box-shadow: 0 0 0 3px rgba($blue, 0.3);
      border-color: $blue;
    }
    .dr-dates {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 rem(24) 0 rem(12);
      min-width: calc(100% - 35px);

      .dr-date {
        font-size: rem(15);
        padding: rem(10.5 0);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        outline: none;

        &:hover, &:focus, &.dr-active {
          color: $blue;
        }
        &:empty:after {
          content: attr(placeholder);
          color: $rat;
        }
      }
      .dr-dates-dash {
        color: $rat;
        padding: 0 10px;
        flex-grow: 0;
        font-weight: 600;
      }
    }
    .dr-presets {
      width: rem(35);
      border-left: 1px solid $mouse;
      flex-shrink: 0;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: center;

      &:hover, &.dr-active {
        border-color: $blue;
        box-shadow: inset 0 2px 3px $moon;

        .dr-preset-bar {
          background-color: $blue;
        }
      }
      .dr-preset-bar {
        height: 2px;
        background-color: $mouse;
        margin: 1px 0 1px 25%;

        &:nth-child(1) {
          width: 50%;
        }
        &:nth-child(2) {
          width: 40%;
        }
        &:nth-child(3) {
          width: 30%;
        }
      }
    }
  }

  .dr-selections {
    position: absolute;

    .dr-calendar {
      background-color: $white;
      font-size: rem(15);
      box-shadow: 0 0 5px $mouse;
      border-radius: $radius;
      position: relative;
      overflow: hidden;
      z-index: 4;
      padding-top: 5px;
      top: -5px;
      left: 4px;
      transition: width .2s;
      min-width: 210px;

      .dr-range-switcher {
        display: flex;
        justify-content: space-between;
        padding: rem(6 8);
        font-size: rem(14);

        .dr-switcher {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: 1px solid rgba($mouse, 0.5);
          border-radius: $radius;
          height: rem(25);

          i {
            color: $mouse;
            position: relative;
            top: -1px;
            cursor: pointer;
            font-size: rem(12);
            height: 100%;
            width: 20px;

            &:hover:before, &:hover:after {
              background-color: $blue;
            }
            &.dr-disabled {
              pointer-events: none;
              opacity: 0;
            }
            &:before, &:after {
              content: "";
              position: absolute;
              width: 7px;
              height: 2px;
              background-color: $mouse;
              border-radius: 1px;
              left: 50%;
            }
            &.dr-left:before {
              top: calc(50% - 2px);
              transform: translate(-50%, -50%) rotate(-45deg);
            }
            &.dr-left:after {
              top: calc(50% + 2px);
              transform: translate(-50%, -50%) rotate(45deg);
            }
            &.dr-right:before {
              top: calc(50% - 2px);
              transform: translate(-50%, -50%) rotate(45deg);
            }
            &.dr-right:after {
              top: calc(50% + 2px);
              transform: translate(-50%, -50%) rotate(-45deg);
            }
          }
        }
        .dr-month-switcher {
          width: 100%;
          margin-right: rem(6);
        }
        .dr-year-switcher {
          min-width: 80px;
        }
      }
      .dr-days-of-week-list {
        display: flex;
        background-color: $moon;
        font-size: rem(10);
        color: $rat;
        padding: rem(5 0);
        border: 1px solid rgba($mouse, 0.5);
        border-left: none;
        border-right: none;

        .dr-day-of-week {
          width: calc(100% / 7);
          text-align: center;
        }
      }
      .dr-day-list {
        display: flex;
        flex-wrap: wrap;
        font-size: rem(15);

        .dr-day {
          padding: rem(5);
          text-align: center;
          width: calc(100% / 7);
          cursor: pointer;
          color: $body;

          &.dr-hover:not(.dr-current) {
            background-color: $moon !important;
          }
          &.dr-hover-before {
            border-left: 2px solid $blue !important;
            border-radius: 2px 0 0 2px;
            padding-left: rem(3) !important;
          }
          &.dr-hover-after {
            border-right: 2px solid $blue !important;
            border-radius: 0 2px 2px 0;
            padding-right: rem(3) !important;
          }
        }
        .dr-selected, .dr-start, .dr-end {
          background-color: $moon;
        }
        .dr-maybe {
          background-color: $moon !important;
        }
        .dr-fade {
          color: $mouse;
        }
        .dr-start {
          border-left: 2px solid $blue;
          border-radius: 2px 0 0 2px;
          padding-left: rem(3);
        }
        .dr-end {
          border-right: 2px solid $blue;
          border-radius: 0 2px 2px 0;
          padding-right: rem(3);
        }
        .dr-current {
          color: $blue !important;
          background-color: rgba($blue, 0.2) !important;
        }
        .dr-outside {
          pointer-events: none;
          cursor: default;
          color: rgba($mouse, 0.5);
        }
      }
    }

    .dr-preset-list {
      background-color: $white;
      color: $blue;
      font-size: rem(15);
      box-shadow: 0 0 5px $mouse;
      border-radius: $radius;
      position: relative;
      overflow: hidden;
      z-index: 4;
      padding-top: 5px;
      top: -5px;
      left: 4px;
      width: 100%;
    }
    .dr-list-item {
      display: flex;
      align-items: flex-end;
      padding: rem(12 10);
      border-bottom: 1px solid $moon;
      cursor: pointer;
      white-space: nowrap;

      &:hover {
        background-color: $moon;
      }
      .dr-item-aside {
        color: $rat;
        font-size: rem(12);
        margin-left: rem(5);
        position: relative;
        top: -1px;
      }
    }
  }
}

.daterange--single {

  .dr-input {
    cursor: text;

    .dr-dates {
      padding: 0;
      min-width: 160px;
      width: 100%;

      .dr-date {
        width: 100%;
        padding: rem(10.5 12);
        text-align: left;
        color: $body;
      }
    }
  }
}
